.eleFocus-appear,
.eleFocus-enter {
    position: relative;
    background-color: #fff;

    &::after{
        z-index: 88;
        border-radius: 2px;
        opacity: 0;
        content: unset;
        display: block;
        position: absolute;
        border: 2px solid transparent;
    }
}

.eleFocus-appear-active,
.eleFocus-enter-active {
    position: relative;
    background-color: #fff;
    &::after{
        opacity: 1;
        content: "";
        display: block;
        position: absolute;
        border-color: rgba($color: #55BB8A, $alpha: .7);
        animation: focus 1200ms ease;
        animation-fill-mode: forwards;
    }
}

.eleFocus-enter-done,
.eleFocus-appear-done {
    &::after{ 
        content: unset;
        opacity: 0;
    }
}
.eleFocus-exit {
    &::after{ 
        content: unset;
        opacity: 0;
    }
}
.eleFocus-exit-active {
    &::after{ 
        content: unset;
        opacity: 0;
    }
}
.eleFocus-exit-done {
    &::after{ 
        content: unset;
        opacity: 0;
    }
}

@keyframes focus {
    0% {
        top: -18px;
        bottom: -18px;
        left: -18px;
        right: -18px;
    }
    60% {
        opacity: 1;
        top: -3px;
        bottom: -3px;
        left: -3px;
        right: -3px;
    }
    100% {
        opacity: 0;
        top: -3px;
        bottom: -3px;
        left: -3px;
        right: -3px;
    }
}